<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @property --vw {
      syntax: "<length>";
      inherits: true;
      initial-value: 100vw;
    }

    @property --vh {
      syntax: "<length>";
      inherits: true;
      initial-value: 100vh;
    }

    :root {
      --w: tan(atan2(var(--vw), 1px));
      --h: tan(atan2(var(--vh), 1px));
    }

  


    .mask_layer {
      width: 100%;
      height:100vh;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .lodding_container {
      position: relative;
      width: 60px;
      height: 60px;
      /* background-color: pink;
      background-image: linear-gradient(to right, #597100 1px, transparent 1px),
        linear-gradient(to bottom, #597100 1px, transparent 1px);
        background-size: 30px 30px; */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .inner1 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #005971;
      transform-origin: 0 30px;
      animation: loading 3s cubic-bezier(0.55, 0.2, 0.3, 0.9) infinite;
    }

    .inner2 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #005971;
      transform-origin: 0 30px;
      animation: loading 3s cubic-bezier(0.61, 0.2, 0.3, 0.8) infinite;
    }

    .inner3 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #005971;
      transform-origin: 0 30px;
      animation: loading 3s cubic-bezier(0.65, 0.2, 0.3, 0.7) infinite;
    }

    .inner4 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #005971;
      transform-origin: 0 30px;
      animation: loading 3s cubic-bezier(0.7, 0.2, 0.3, 0.6) infinite;
    }

    .inner5 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #005971;
      transform-origin: 0 30px;
      animation: loading 3s cubic-bezier(0.75, 0.2, 0.3, 0.5) infinite;
    }


    @keyframes loading {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(1turn);
      }
    }
  </style>
</head>

<body>
  <div class="mask_layer">
    <div class="lodding_container">
      <div class="inner1"></div>
      <div class="inner2"></div>
      <div class="inner3"></div>
      <div class="inner4"></div>
      <div class="inner5"></div>
    </div>
  </div>

</body>

</html>